<!-- 点击编辑弹出的dialog -->
<template>
    <el-dialog
            :visible.sync="visible"
            :modal-append-to-body='false'
            :close-on-click-modal='false'
            @close="close"
           >
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="企业名称" prop="enterpriseAid">
                <el-select v-model="ruleForm.enterpriseAid" placeholder="请选择企业名称" clearable>
                    <el-option  v-for="(enterprise,index) in enterpriseList" 
                                :index="index + ''" 
                                :key="enterprise.aid"
                                :label="enterprise.name"
                                :value="enterprise.aid"
                                >
                        {{enterprise.name}}
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="招聘信息aid" prop="aid" v-show="false">
                    <el-input type="hidden" v-model="ruleForm.aid" v-show="false"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="leader">
                    <el-input prefix-icon="el-icon-user" v-model="ruleForm.leader" placeholder="请输入企业联系人" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input prefix-icon="el-icon-phone" v-model="ruleForm.phone" placeholder="请输入联系电话" clearable></el-input>
                </el-form-item>
                <el-form-item label="招聘岗位" prop="posName">
                    <el-input prefix-icon="el-icon-brush" v-model="ruleForm.posName" placeholder="请输入招聘岗位" clearable></el-input>
                </el-form-item>
                <el-form-item label="薪资" prop="salary">
                    <el-input prefix-icon="el-icon-medal" v-model="ruleForm.salary" placeholder="请输入薪资" clearable></el-input>
                </el-form-item>
                <el-form-item label="招聘地址" prop="recruitmentAddress">
                    <el-input prefix-icon="el-icon-map-location" v-model="ruleForm.recruitmentAddress" placeholder="请输入招聘地址" clearable></el-input>
                </el-form-item>
                <el-form-item label="招聘时间" prop="recruimentTime">
                    <el-date-picker
                        v-model="ruleForm.recruimentTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="性别要求" prop="gender">
                  <el-select v-model="ruleForm.gender" placeholder="请选择" clearable>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                    <el-option label="无限制" value="无限制"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否有效" prop="state">
                  <el-select v-model="ruleForm.state" placeholder="请选择" clearable>
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="招聘内容" prop="content">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 7, maxRows: 20}"
                        placeholder="请输入招聘内容"
                        v-model="ruleForm.content">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>

<script>
import { getEnterpriseList,editOrAddRecruitInfo } from '../../../api/recruitmentInfoManage/index'
import { getStore } from '../../../storage/storage';
export default { 
    data () {
        var checkPhone = (rule, value, callback) => {
            const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
            if (!value) {
                return callback(new Error('电话号码不能为空'))
            }
            setTimeout(() => {
                if (!Number.isInteger(+value)) {
                    callback(new Error('请输入数字'))
                } else {
                    if (phoneReg.test(value)) {
                        callback();
                    } else {
                    callback(new Error('电话号码格式不正确'))
                    }
                }
            }, 100)
        }
        return {
            dialogName: '', // dialog的名称
            enterpriseList:[],
            visible: this.show,
            ruleForm: {
                aid: -1, // 招聘信息aid
                enterpriseAid: '',
                enterpriseName: '',
                leader: '',
                phone: '',
                posName: '',
                salary: '',
                recruitmentAddress: '',
                recruimentTime: '',
                gender: '',
                content: '',
                state: '', // 发布的招聘信息是否有效
            },
            rules: {
                enterpriseName: [
                    { required: true, message: '请选择企业名称', trigger: 'change' }
                ],
                leader: [
                    { required: true, message: '请输入联系人名称', trigger: 'blur' }    
                ],
                phone: [
                    { validator: checkPhone, trigger: ['blur','change'] }
                ],
                posName: [
                    { required: true, message: '请输入岗位名称', trigger: 'blur' }
                ],
                salary: [
                    { required: true, message: '请输入薪资', trigger: 'blur' }
                ],
                recruitmentAddress: [
                    { required: true, message: '请输入招聘地址', trigger: 'blur' }
                ],
                recruimentTime: [
                    { required: true, message: '请选择招聘时间', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别要求', trigger: 'change' }
                ],
                state: [
                    { required: true, message: '请选择是否有效', trigger: 'change' }
                ],
                content: [
                    { required: true, message: '请输入招聘内容', trigger: 'blur' }
                ],
            }
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        detailRow: {
            type: Object,
            require: true,
        }
    },
    watch: {
        show () {
            this.visible = this.show;
        },
        detailRow() {
            this.ruleForm.aid = this.detailRow.aid;
            this.ruleForm.enterpriseAid = this.detailRow.enterpriseAid;
            this.ruleForm.leader = this.detailRow.leader;
            this.ruleForm.phone = this.detailRow.phone;
            this.ruleForm.posName = this.detailRow.posName;
            this.ruleForm.salary = this.detailRow.salary;
            this.ruleForm.recruitmentAddress = this.detailRow.recruitmentAddress;
            this.ruleForm.recruimentTime = this.detailRow.recruimentTime;
            this.ruleForm.gender = this.detailRow.gender;
            this.ruleForm.content = this.detailRow.content;
            this.ruleForm.state = this.detailRow.state === 1 ? '是' : '否';
        },
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {
                aid: this.ruleForm.aid,
                enterpriseAid: this.ruleForm.enterpriseAid,
                leader: this.ruleForm.leader,
                phone: this.ruleForm.phone,
                posName: this.ruleForm.posName,
                salary: this.ruleForm.salary,
                recruitmentAddress: this.ruleForm.recruitmentAddress,
                recruimentTime: this.ruleForm.recruimentTime,
                gender: this.ruleForm.gender,
                content: this.ruleForm.content,
                state: this.ruleForm.state,
            }
            editOrAddRecruitInfo(params).then(res=>{
                this.$message({
                    message: res.data.message,
                    type: 'success',
                    duration: 800,
                })
                setTimeout(() => {
                    this.show = false
                }, 800);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
          this.ruleForm = {};
      },
      close(){
        //   $emit('update:show', false);
          this.$router.go(0);
      }
    },
    created(){
        // 获取企业列表
        const params = {
            account: getStore("account"),
        }
        getEnterpriseList(params).then(res=>{
            this.enterpriseList = res.data.data;
        })
    }
}
</script>

<style scoped>

</style>
